<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import * as indexdata from '@/api/indexdata.js';
import QrcodeVue from 'qrcode.vue'
import QRCode from 'qrcode'
import {ElMessage} from 'element-plus'
const searchType = ref(''); // 筛选条件：预约类型
const searchDate = ref(null); // 筛选条件：预约日期
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页显示数量
const total = ref(0)

const data_list = ref([])

const centerDialogVisible = ref(false);

const pinfen = ref(0)

const pingjia = ref('')

const getDate = async ()=>{
  console.log(searchDate.value);
  let select_date = ''
  if (!searchDate.value){
    select_date =  '';
  }else{
    select_date = searchDate.value.toISOString()
  }
  const param = {
    yyType:searchType.value,
    yyTime:select_date,
    currentPage:currentPage.value
  }
  console.log(param);
  const res = await indexdata.finyuyueService(param);
  if (res.code === 0) {
    data_list.value = res.data
    total.value = res.total
  }
}

const addModel = ref({
  jinquId:'',
  jiudianId:'',
})

const showDialog = (row) => {
  addModel.value.jinquId = row.row.jinquId;
  addModel.value.jiudianId = row.row.jiudianId;
}

const post_pingjia = async (scope)=>{
  const param = {
    currentPage:currentPage.value,
    jinquId:addModel.value.jinquId,
    jiudianId:addModel.value.jiudianId,
    content:pingjia.value,
    fenshu:pinfen.value
  }
  const result = await indexdata.addPinlunService(param)
  console.log(result);
  console.log(result.code);
  console.log(result.msg);
  if(result.code === 0){
    ElMessage.success(result.msg? result.msg:'评论成功');
  }
}

// 模拟获取历史预约数据
onMounted(() => {
  getDate();
});


// 处理分页的跳转
const handlePageChange = (page) => {
  currentPage.value = page;
  getDate();
};

// 重置筛选条件
const resetFilters = () => {
  searchType.value = '';
  searchDate.value = '';
};

// 检索
const search = () => {
  // 进行检索操作，可以根据实际情况加入后台接口请求等
  getDate();
};

const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return d.toLocaleDateString(); // 根据需求你可以选择不同的格式化方式
};
const qrDialogVisible = ref(false)
const currentQrUrl = ref('')
const qrImageDataUrl = ref('')
const showQRCode = async (url) => {
  currentQrUrl.value = url
  qrImageDataUrl.value = await QRCode.toDataURL(url) // 生成 base64 图像
  qrDialogVisible.value = true
}
</script>

<template>
  <el-card class="history-card">
    <h2 class="history-title">历史预约</h2>
    <el-divider></el-divider>
    <!-- 筛选区域 -->
    <el-row class="filter-row" :gutter="20">
      <el-col :span="6">
        <el-select v-model="searchType" placeholder="选择预约类型" class="filter-item">
          <el-option label="景区预约" value="景区预约"></el-option>
          <el-option label="酒店预约" value="酒店预约"></el-option>
        </el-select>
      </el-col>

      <el-col :span="6">
        <el-date-picker
          v-model="searchDate"
          type="date"
          placeholder="选择日期"
          class="filter-item"
        ></el-date-picker>
      </el-col>

      <el-col :span="6">
        <el-button @click="search" type="primary" class="search-btn">检索</el-button>
      </el-col>

      <el-col :span="6">
        <el-button @click="resetFilters" type="default" class="reset-btn">重置</el-button>
      </el-col>
    </el-row>

    <!-- 历史预约表格 -->
    <el-table :data="data_list" style="width: 100%">
      <el-table-column label="预约订单编号" prop="uuid">

      </el-table-column>
      <el-table-column label="预约日期" prop="yyTime">
        <template #default="scope">
          {{ formatDate(scope.row.yyTime) }}
        </template>
      </el-table-column>
      <el-table-column label="预约内容">
        <template #default="scope">
          <template v-if="scope.row.jinquId">景区：{{ scope.row.jinquName }}</template>
          <template v-if="scope.row.jiudianName">酒店：{{ scope.row.jiudianName }}--{{ scope.row.room }}</template>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" @click="centerDialogVisible = true,showDialog(scope)">评价</el-button>
        </template>
      </el-table-column>
      <el-table-column label="验票">
        <template #default="scope">
          <!-- <el-button type="success" @click="showQRCode(scope.row.qrUrl)">查看二维码</el-button> -->
          <el-button type="success" @click="showQRCode('http://localhost:5173/adminYanpiao?yuyueid='+scope.row.uuid)">查看二维码</el-button>
        </template>
      </el-table-column>
      
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
      layout="prev, pager, next, jumper"
      class="pagination"
    ></el-pagination>


  <el-dialog
    v-model="centerDialogVisible"
    title="请输入你的评价"
    width="500"
    align-center
    >
    <hr /> <!-- 底部边框 -->

    <!-- 输入框 -->
    <el-input v-model="pingjia" type="textarea" placeholder="请输入评价内容" rows="4" />

    <!-- 评分组件 -->
    <el-rate v-model="pinfen" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false,post_pingjia()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>


  <el-dialog
    v-model="qrDialogVisible"
    width="360px"
    class="custom-qr-dialog"
    :show-close="false"
    align-center
  >
    <template #header>
      <div class="dialog-header">
        <el-icon class="icon"><Tickets /></el-icon>
        <span class="title">验票二维码</span>
      </div>
    </template>

    <div class="qr-content">
      <div class="qr-wrapper">
        <!-- <qrcode-vue :value="currentQrUrl" :size="200" /> -->
         <img :src="qrImageDataUrl" :width="200" height="200" />

      </div>
      <p class="qr-tip">请出示此二维码进行验票</p>
    </div>

  </el-dialog>


  </el-card>
</template>



<style scoped>
.history-card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 100%; /* 设置宽度为 100% */
  max-width: 1200px; /* 限制最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.history-title {
  font-size: 24px;
  font-weight: bold;
  margin-top: -20px;
  margin-bottom: 20px;
  color: #333;
}

.filter-row {
  margin-bottom: 20px;
}

.filter-item {
  width: 100%;
}

.search-btn, .reset-btn {
  width: 100%;
}

.el-table {
  margin-bottom: 20px;
  width: 100%; /* 确保表格宽度为 100% */
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.el-pagination .el-button--primary {
  background-color: #3498db;
  border-color: #3498db;
  color: #fff;
}

.el-pagination .el-button--primary:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

.el-pagination .el-button--default {
  background-color: #f5f5f5;
  border-color: #ccc;
  color: #333;
}

.el-pagination .el-button--default:hover {
  background-color: #e6e6e6;
  border-color: #bbb;
}


.custom-qr-dialog {
  border-radius: 16px;
  padding-bottom: 20px;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 0 0 10px;
}

.icon {
  color: #409EFF;
  font-size: 20px;
}

.qr-content {
  text-align: center;
  padding: 20px 10px;
}

.qr-wrapper {
  display: inline-block;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f3f4f6);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.qr-tip {
  margin-top: 16px;
  font-size: 14px;
  color: #888;
}
</style>
